<template>

  <n-form-item :label="component.description" :path="component.type" class="creative-component-form-item">
    <n-select :multiple="true" :options="optional" :value="form.value" filterable @update:value="changeValue" clearable
      :max-tag-count="labelLimit.max_number"></n-select>
  </n-form-item>


</template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, unref, watch } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch, useMessage } from 'naive-ui';


import {
  NSelect,
  NFormItem,
} from 'naive-ui'
const store = useStore();
const messsage = useMessage();
const creativor = computed(() => store.state.adv.modal.creativor);
const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});


const component = toRef<any, any>(props, 'component');

const childrenComponent = computed(() => component.value.children || {});
const labelLimit = computed(() => {

  const { max_number, min_number } = childrenComponent.value.list && childrenComponent.value.list.array_property ? childrenComponent.value.list.array_property : {} as any;
  return {
    max_number,
    min_number
  }
})


const form = reactive({
  value: component.value.value.list ? component.value.value.list.map((_: any) => _.content) : [],
  // list: (component.value.value.list || [])
});





const optional = computed(() => {

  return [{
    label: '新品推荐',
    value: '新品推荐'
  }, {
    label: '折扣',
    value: '折扣'
  },
  {
    label: '包邮',
    value: '包邮'
  },
  {
    label: '客服咨询',
    value: '客服咨询'
  }]
})






function changeValue(_: any, options: any, c) {
  if (options.length > labelLimit.value.max_number) {
    messsage.warning(`最多选择${labelLimit.value.max_number}个标签`);
    return;
  }
  form.value = [];
  let list = options.map((option: any) => {
    form.value.push(option.value);
    return {
      type: option.value,
      content: option.label
    }
  });
  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: {
      list
    }
  })
}





</script>

<style scoped lang="scss">
@import url('./style.scss');
</style>
